<template>
  <div class="collect-state">
    <span class="icon" :style="`background-color:${formatIsCollect(value)?.color};`"></span>
    <span class="label">{{ formatIsCollect(value)?.label }}</span>
  </div>
</template>

<script lang="ts" setup name="CollectState">
import { selectValueFormatter } from '@/stores/modules/collect-manage/select-data-source'
import type { SelectItemType } from '@/stores/modules/collect-manage/select-data-source'
import { toRefs } from 'vue'

type Props = { value: number; collectState: SelectItemType[] }
const props = defineProps<Props>()
const { value, collectState } = toRefs(props)

const formatIsCollect = (val: number) => {
  if (val === 1) {
    return {
      label: selectValueFormatter(collectState.value, val),
      color: '#03B861'
    }
  } else if (val === 2) {
    return {
      label: selectValueFormatter(collectState.value, val),
      color: '#FE4C4D'
    }
  } else if (val === 3) {
    return {
      label: selectValueFormatter(collectState.value, val),
      color: '#FF7900'
    }
  }
}
</script>

<style lang="less" scoped>
.collect-state {
  position: relative;

  .icon {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    // background-color: red;
  }

  .label {
    margin-left: 8px;
  }
}
</style>
